<template>
  <view class="home-page bg-c1">
    <view class="header bg-c3">
      <view class="search-wrap">
      <view class="search">
        <uni-icon type="search" size="22"></uni-icon>
        <text class="text">搜索</text>
      </view>
     <view class="lmqicon icon-pinglun"></view>
      <uni-icon class="plusempty" type="plusempty" size="34" color="#fff"></uni-icon>
      </view>
      <view class="naving">
        <view class="item">
          <image src="../../../static/images/home_slices/sys.png" @click="handleCode"></image>
          <text>扫一扫</text>
        </view>
        <view class="item" @click="handleUrl('/pages/HomePage/ExchangeRate/rate')">
          <image src="../../../static/images/home_slices/huilv.png"></image>
          <text>汇率</text>
        </view>
        <view class="item"  @click="handleUrl('/pages/HomePage/Balance/balance')">
          <image src="../../../static/images/home_slices/balance.png"></image>
          <text>余额</text>
        </view>
        <view class="item">
          <image src="../../../static/images/home_slices/kefu.png"></image>
          <text>客服</text>
        </view>
      </view>
      <view class="nav">
        <view class="nav-item" v-for="(item,index) in navLists" :key="index" @click="handleUrl(item.url)">
          <image :src="item.imgUrl"></image>
          <text>{{item.text}}</text>
        </view>
      </view>
    </view>
    <view class="message">
      <view class="left">
        <image src="../../../static/images/home/inform-left.png"></image>
      </view>
      <view class="middle">
        <view class="middle-item">
          <text class="text1">支付助手：</text>
          <text class="text2">11111444支付成功</text>
          <text class="text3">19分钟前</text>
        </view>
        <view class="middle-item">
          <text class="text1">支付助手：</text>
          <text class="text2">333332222支付成功</text>
          <text class="text3">1天前</text>
        </view>
      </view>
      <view class="right">
        <view class="dot"></view>
        <view class="grace-iconfont icon-arrow-right"></view>
      </view>
    </view>

    <view class="banner">
      <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval">
         <swiper-item>
          <view class="wrap">
            <image src="../../../static/images/home/banner.png"></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="wrap">
            <image src="../../../static/images/home_slices/banner2.jpg"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="offset"></view>
    <view class="huilv">
      <view class="title">
        <view class="side"></view>
        <text class="text">汇率换算</text>
      </view>
      <view class="wrap">
        <view class="item border-bottom">
          <view class="left">
          <text class="text1 fs36">1</text>
          <text class="text2 fs28">美元</text>
          <text class="text3 fs24 c7">USD</text>
        </view>
        <view class="right">
          <text class="text4 fs38">≈</text>
          <text class="text5 fs36">6.6648</text>
          <text class="text6 fs28">人民币</text>
          <text class="text7 fs24 c7">CNY</text>
          </view>
        </view>
        <view class="item border-bottom">
          <view class="left">
          <text class="text1 fs36">1</text>
          <text class="text2 fs28">美元</text>
          <text class="text3 fs24 c7">USD</text>
        </view>
        <view class="right">
          <text class="text4 fs38">≈</text>
          <text class="text5 fs36">6.6648</text>
          <text class="text6 fs28">人民币</text>
          <text class="text7 fs24 c7">CNY</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import uniIcon from "@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue";
export default {
    components: {
    uniIcon
  },
  data(){
    return{
      a:'',
    }
  },
  onLoad() {
    // this.a()
uni.connectSocket({
  url: 'ws://123.207.167.163:9010/ajaxchattest',
  success(res){
    console.log('链接成功');
  }
});
uni.onSocketOpen(function (res) {
  console.log('WebSocket连接已打开！');
  setTimeout(() => {
   a('吃饭了')
   setTimeout(() => {
     a('房东看房几点几分')
     setTimeout(() => {
       a('下雨了')
       setTimeout(() => {
         a('阿布哈哈哈就好地方')
       }, 1000);
     }, 1000);
   }, 2000);
  }, 7000);
});
uni.onSocketError(function (res) {
  console.log('WebSocket连接打开失败，请检查！');
});

uni.onSocketMessage(function (res) {
  console.log('收到服务器内容：' + res.data);
     plus.push.createMessage(res.data,"LocalMSG",{title:'小明'})

});
 
uni.onSocketClose(function (res) {
  console.log('WebSocket 已关闭！');
});

function a(msg){
uni.sendSocketMessage({
  data:msg,
  success(){
    console.log('发送成功');
    
  }
})
}

  },
  data() { 
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      navLists: [
        {
          imgUrl: "../../../static/images/home_slices/transfer.png",
          text: "转账",
          url: "/pages/HomePage/Accounts/accounts"
        },
        {
          imgUrl: "../../../static/images/home_slices/fukuanma.png",
          text: "付款码",
          url: "/pages/HomePage/Payment/paymentCode"
        },
        {
          imgUrl: "../../../static/images/home_slices/shoukuanma.png",
          text: "收款码"
        },
        {
          imgUrl: "../../../static/images/home_slices/deal.png",
          text: "交易"
        },
        {
          imgUrl: "../../../static/images/home_slices/store.png",
          text: "商城"
        },
        {
          imgUrl: "../../../static/images/home_slices/shequ.png",
          text: "社区"
        },
        {
          imgUrl: "../../../static/images/home_slices/yule.png",
          text: "娱乐"
        },
        {
          imgUrl: "../../../static/images/home_slices/more.png",
          text: "更多"
        }
      ]
    };
  },
  methods: {
    handleSearch() {
      uni.navigateTo({
        url: "/pages/HomePage/search"
      });
    },
    handleCode() {
      uni.scanCode({
        success: function(res) {
          //#ifdef APP-PLUS
          plus.runtime.openURL(res.result);
          //#endif
          // console.log("条码类型：" + res.scanType);
          // console.log("条码内容：" + res.result);
        }
      });
    },
    handleUrl(url){
      uni.navigateTo({
        url: url
      })
    },
  //  async  a() {
  // let a = await this.$http.GET({
  //       url: `https://easy-mock.com/mock/5c53efa86ad2a8357e2c72a3/lx/Mock`,
  //     });
  //     console.log(a);
  //   }
  }
};
</script>

<style lang="scss">
@import "../../../styles/global/index";
.header{
  @include size(100%,520upx);
  position: relative;
  .search-wrap{
    display: flex;
    align-items: center;
    padding:24upx 28upx 0 28upx;
    height: 58upx;
    .search{
      @include size(541upx,100%);
      background: #3E7BFF;
      border-radius: 40upx;
      display: flex;
      align-items: center;
      padding-left:40upx;
      color:#CCD9EC;
      .text{
        padding-left:18upx;
      }
    }
    .icon-pinglun{
      height: 100%;
      padding:0 22upx 0 30upx;
      color:#fff;
      font-size: 40upx;
      display: flex;
      justify-content: center;
      line-height: 64upx;
    }
    .plusempty{
      height: 100%;
      width: 40upx;
      display: flex;
      justify-content: center;
      line-height: 58upx;
    }
  }
  .naving{
    @include flex-bw;
    padding: 0 68upx;
    margin-top: 40upx;
    .item{
      @include flex-cl;
      width: 25%;
      image{
        @include size(56upx,56upx)
      }
      text{
        color:#FEFEFE;
        padding-top: 20upx;
      }
    }
  }
  .nav{
    position: absolute;
    bottom:-90upx;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 10upx;
    @include size(690upx,310upx);
    padding-top: 12upx;
    box-shadow: 2upx 2upx 10upx rgba(0,0,0, .1);
    .nav-item{
      @include size(25%,50%);
      @include flex-cl;
      image{
        @include size(56upx,56upx)
      }
      text{
        padding-top: 20upx;
        color:#585A5C;
      }
    }
  }
}
.message{
  margin-top: 120upx;
  margin: 120upx  28upx 0 28upx;
  display: flex;
  align-items: center;
  border-radius: 12upx;
  box-shadow:rgba(0,0,0,.1) 0px 0px 20upx;
  height: 120upx;
  .left{
    padding:0 20upx 0 30upx;
    @include size(72upx,72upx);
    image{
      @include size(100%,100%);
    }
  }
  .middle{
    .middle-item{
      font-size: 24upx;
      .text3{
        padding-left:20upx;
        color:#a5a5a5;
      }
    }
  }
  .right{
    @include flex-center;
    padding-left:40upx;
    .dot{
      @include size(16upx,16upx);
      border-radius: 50%;
      background: #FF5E5E;
    }
    .icon-arrow-right{
      padding-left:10upx;
      color:#bdbdbd;
    }
  }
}
.banner{
  padding: 24upx 0;
  @include size(100%,160upx);
  .swiper{
    height: 170upx;
  }
  .wrap{
    padding: 0 28upx;
    image{
      @include size(100%,160upx);
      border-radius:8upx;
    }
  }
}
.offset{
  background: #F2F3F7;
  height: 20upx;
}
.huilv{
  padding: 0 28upx;
  height: 246upx;
  .title{
    height: 36upx;
    display: flex;
    align-items: center;
    padding: 20upx 0;
    .side{
      @include size(6upx,100%);
      background: #3E7BFF;
    }
    .text{
      font-size: 34upx;
      padding-left: 18upx;
    }
  }
  .wrap{
    @include size(100%,158upx);
    border-radius: 10upx;
    box-shadow:rgba(0,0,0,.1) 0px 0px 20upx;
    .item{
      height: 50%;
      flex:1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24upx;
      .text2{
        padding-left:6upx;
      }
      .text3{
        padding-left:10upx;
        line-height: 1;
      }
      .text5{
        padding-left:20upx;
      }
      .text6{
        padding:0 14upx;
      }
    }
  }
}
</style>